今日目標說明

以前在寫 React 串接 API 時，我們總是要寫一堆 useState (裝資料)、useEffect (打 API)、isLoading (Loading 狀態) 以及 error (錯誤處理)。程式碼又長又臭。
為了解決這個痛點，我們的專案導入了 React Query (@tanstack/react-query)！今天先來聊聊為什麼這套工具會成為現代前端的標配。

【架構決策對比】Client State vs Server State

過去我們習慣把所有資料（包括 API 抓回來的列表）塞進 Redux 或 Context 裡面統一管理。但其實狀態分為兩種：

React Query 的偉大之處，在於它幫我們把「Server State」徹底接管。它內建了：

1. 自動快取 (Caching)：切換頁面再切回來，不用重新打 API，畫面秒開！
2. 自動處理非同步狀態：直接送您 isLoading, isError 變數，不用再自己用 useState 手刻。

// 傳統寫法 vs React Query 寫法 (示意)
// 傳統：
// const [data, setData] = useState([]);
// const [loading, setLoading] = useState(false);
// useEffect(() => { fetch()... }, [])

// React Query 只要一行：
// const { data, isLoading } = useQuery(['holdings'], fetchHoldings);

實際畫面截圖

在開發網頁畫面左下角或右下角，會出現一個小小的「紅色/黃色花朵圖示」（這是 React Query 的 Logo）

點擊那朵小花，畫面下方就會彈出一個開發者面板。

觀察快取與狀態：
會在面板左側看到陣列（例如 ['holdings'] 或是 ['pokemon']），這些就是發出去的 API 請求代號 (Query Keys)。
觀察顏色標籤：

• 🟢 Fresh (綠色)：資料是最新的，切換頁面不需要重新打 API。
• 🟡 Stale (黃色)：資料已過期，下次用到這筆資料時，React Query 會偷偷在背景重打一次 API (Background Fetch) 更新資料。
• 🔵 Fetching (藍色)：正在發送 API 請求中。
  觀察 Data 區塊：點擊左側的 Query，右側可以立刻看到這支 API 目前存在記憶體裡的完整 JSON 資料是什麼。

小結

觀念溝通完畢！這套神器能大幅減少前端的冗贅程式碼。明天，我們就直接實戰，用它來串接我們的「寶可夢持有紀錄列表」API！